<template>
  <!-- 服务商推荐 -->
    <CommonTitle titleName="推荐比选服务单位"></CommonTitle>
    <div class="box">
        <el-form
                :inline="true"
                label-width="140"
                :rules="rules"
                ref="formRef"
                :model="formInline"
                class="demo-form-inline"
        >
            <el-row>
                <el-col :span="8" v-if="state.disabled">
                    <el-form-item label="审核编号">
                        <el-input v-model="formInline.flowId" disabled placeholder="" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.disabled">
                    <el-select v-model="formInline.status" disabled>
                        <el-option
                                v-for="item in state.auditStatus"
                                :key="item.userId"
                                :label="item.userName"
                                :value="item.userId"
                        >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8" v-if="state.disabled">
                    <el-form-item label=" ">
                        <el-button
                                type="primary"
                                class="button_edit"
                                @click="
                () => {
                  window.open(formInline.routeUrl)
                }
              "
                        >查看流程审批</el-button
                        >
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属部门">
                        <el-input
                                v-model="formInline.projectDepartment"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属项目集">
                        <el-input
                                v-model="formInline.projectSetName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目集编号">
                        <el-input
                                v-model="formInline.projectSetCode"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目负责人">
                        <el-input
                                v-model="formInline.responsibleUserName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属项目">
                        <el-input
                                v-model="formInline.projectName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目编号">
                        <el-input
                                v-model="formInline.projectId"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="任务来源">
                        <el-input
                                v-model="formInline.projectTaskSource"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属阶段">
                        <el-input
                                v-model="formInline.projectStage"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="服务范围">
                        <el-date-picker
                                v-model="formInline.startTime"
                                disabled
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                size="large"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属任务">
                        <el-input
                                v-model="formInline.projectTask"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="选聘方式" prop="electionMethod">
                        <el-select
                                disabled
                                v-model="formInline.electionMethod"
                                placeholder=""
                        >
                            <el-option
                                    v-for="item in projectTendersWayList"
                                    :key="item"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最高限价" >
                        <el-input
                                v-model="formInline.checkPrice"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资金来源" >
                        <el-input
                                v-model="formInline.fundsSource"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资格要求" prop="qualificationExplain">
                        <el-input
                                v-model="formInline.qualificationExplain"
                                :disabled="state.disabled"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="实施范围">
                        <el-date-picker
                                :disabled="state.disabled"
                                v-model="formInline.executeScope"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                size="large"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="招标项目概括说明">
                        <el-input
                                v-model="formInline.projectOverview"
                                disabled
                                type="textarea"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="单位名称">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.serviceList.serviceName"
                                placeholder="请输入单位名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="资信情况说明">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.serviceList.creditPosition"
                                placeholder="请输入资信情况说明"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="7" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="推荐理由说明">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.serviceList.serviceUnitName"
                                placeholder="请输入推荐理由说明"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="">
                        <el-button class="button_edit m-l10" @click="addRow">添加</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="被推荐单位名单"></el-form-item>
                    <tableCom
                            class="table_class"
                            :tableHead="tableHead"
                            :tableData="tableData"
                            :isRadio="false"
                            border
                            :height="300"
                            :isSelection="false"
                    >
                        <template #operate>
                            <el-table-column label="操作" width="200">
                                <template #default="{ row }">
                                    <el-button
                                            :disabled="state.disabled || isLook==1"
                                            size="small"
                                            class="button_delete"
                                            type="primary"
                                            @click="deleteHandler(row)"
                                    >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </template>
                    </tableCom>
                </el-col>
                <el-col :span="24" class="m-t20">
                    <el-form-item label="备注" prop="remark">
                        <el-input
                                v-model="formInline.remark"
                                :disabled="state.disabled"
                                type="textarea"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24" >
                    <CommonTitle  titleName="其他信息"></CommonTitle>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="申请人">
                        <el-input disabled v-model="formInline.createName" placeholder="" />
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="申请部门">
                        <el-input

                                disabled
                                v-model="formInline.createDepartmentName"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="创建时间">
                        <el-input

                                disabled
                                v-model="formInline.createTime"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <span class="dialog-footer" v-if="isLook === '0' || isLook === '2'">
      <el-button @click="submit" class="button_view">发起审批</el-button>
      <el-button @click="goback" class="button_cancel2"> 取消 </el-button>
    </span>
    </div>
</template>

<script setup>
import TableCom from '@/components/table/table.vue'
import { ref, reactive, onBeforeMount, onMounted } from 'vue'
import {
    ElRow,
    ElDatePicker,
    ElCol,
    ElMessage,
    ElForm,
    ElFormItem,
    ElInput
} from 'element-plus'
import { serviceApi } from '@/api/project'
import {
    getURLhandler,
    nanoid
} from '@/views/constructionProjectManage/static/utools.js'

import CommonTitle from '@/components/CommonTitle.vue'
import { useRouter, useRoute } from 'vue-router'
import {taskApi} from "@/api/investment";


let router = useRouter()
let route = useRoute()

const getProjectId = router.currentRoute.value.params.projectId;
const getProjectTaskId = router.currentRoute.value.params.projectTaskId;
const getItemId = router.currentRoute.value.params.itemId;
const isLook = router.currentRoute.value.params.isLook;

const state = reactive({
    user: '',
    auditStatus: [
        {
            label: '待审核',
            value: 1
        },
        {
            label: '审核成功',
            value: 2
        },
        {
            label: '审核驳回',
            value: 3
        }
    ],
    serviceList: {
        serviceName: '',
        creditPosition: '',
        serviceUnitName: '',
        serviceId: nanoid()
    },
    projectTaskId: '',
    itemId: '',
    projectId: '',
    disabled: false
})
const formInline = reactive({
    companyName: '',
    creditSituation: ''
})
const tableData = ref([])
const tableHead = ref([
    {
        prop: 'serviceName',
        label: '单位名称'
    },
    {
        prop: 'creditPosition',
        label: '资信情况说明'
    },
    {
        prop: 'serviceUnitName',
        label: '推荐理由说明'
    }
])
//删除
const deleteHandler = (row) => {
    tableData.value = tableData.value.filter(
        (item) => item.serviceId !== row.serviceId
    )
}
const handel = () => {}
const addRow = () => {
    state.serviceList.serviceId = nanoid()
    tableData.value.push(JSON.parse(JSON.stringify(state.serviceList)))
}
const goback = () => {
    router.go(-1)
}
const formRef = ref(null)
const submit = () => {
    formRef.value.validate(async (valid, fields) => {
        if (valid) {
            formInline.projectId = getProjectId
            formInline.taskId = getProjectTaskId
            formInline.itemId = getItemId
            let obj = {}
            obj.applyStartTime = formInline.executeScope[0]
            obj.applyEndTime = formInline.executeScope[1]
            obj.tenderTaskId = formInline.taskId
            obj.projectId = getProjectId
            obj.fundsSource = formInline.fundsSource
            obj.checkPrice = formInline.checkPrice
            obj.remark = formInline.remark
            obj.qualificationExplain = formInline.qualificationExplain
            obj.serviceList = tableData.value

            obj.itemId = getItemId;

            if(isLook === '2'){
                obj.id = formInline.id;
                obj.referenceId = formInline.referenceId;
            }

            await taskApi.addServiceUnit(obj).then((res) => {
                if (res.code == '200') {
                    ElMessage.success('操作成功')
                    router.go(-1)
                }
            })
        }
    })
}


//1 择优询价  2 邀请竞争性谈判 3 邀请竞争性磋商 4 单一来源采购
const projectTendersWayList = reactive([
    {
        label: '择优询价',
        value: '1'
    },
    {
        label: '邀请竞争性谈判',
        value: '2'
    },
    {
        label: '邀请竞争性磋商',
        value: '3'
    },
    {
        label: '单一来源采购',
        value: '4'
    }
])
const rules = {
    checkPrice: [
        { required: true, message: '最高报价不能为空', trigger: 'blur' }
    ],
    qualificationExplain: [
        { required: true, message: '资格要求不能为空', trigger: 'blur' }
    ],
    fundsSource: [
        { required: true, message: '资金来源不能为空', trigger: 'blur' }
    ],
    executeScope: [
        { required: true, message: '实施范围不能为空', trigger: 'blur' }
    ],
    remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
}
onMounted(() => {
    taskApi
        .getServiceUnit({ taskId: getProjectTaskId,itemId : getItemId, projectId:getProjectId })
        .then((res) => {
            if (res.code == '200') {
                for (const key in res.data) {
                    if (Object.hasOwnProperty.call(res.data, key)) {
                        if (key == 'startTime') {
                            formInline[key] = [res.data[key], res.data['endTime']]
                            continue
                        }
                        if (key == 'serviceList') {
                            tableData.value = res.data[key] || []
                            continue
                        }

                        if (key == 'applyStartTime') {
                            formInline['executeScope'] = [
                                res.data['applyStartTime'],
                                res.data['applyEndTime']
                            ]
                            continue
                        }

                        formInline[key] = res.data[key]
                    }
                }
            }
        })
})
</script>
<style lang="scss" scoped>
.el-form-item,
.el-select {
  width: 100%;
}
.box {
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 34px 90px;
}
</style>
